<template>
  <div class="subPage">
    <nav-bar :title="navTitle" position="center" color='#fff' :rowColor="'black'" :goBack="goBack" :isMsg='false' fontColor='#000' ></nav-bar>
    <div class="faCenter" >
      <!-- 其他补充弹窗层 -->
      <div class="fillOtherMsg" v-if="otherMsgModal">
        <div class="textCont">
          <textarea
            :disable-default-padding="true"
            type="text"
            fixed="true"
            placeholder="请输入其他补充"
            maxlength="50"
            :class="['newIpt','fixPosition']"
            :focus="true"
            :adjust-position='true'
            v-model="otherMsg"
          />
          <div class="fontNumCount">{{otherMsg.length}} / 50 字</div>
        </div>
        <div class="submitBtn" @click="affirmInput">
          确认
        </div>
        <div v-if="ifIphonex" style="height:30rpx"></div>
      </div>
      <div  class="centBox" @touchmove="touchstart">
        <div class="detailsBox">
          <!-- <div class="choiceBox" @click="showModal">
            选择就诊人
            <div class="iconBox">
              <span>点击选择</span>
              <img :src="rightIcon" />
            </div>
          </div> -->
          <div class="msgBox">
            <div>
              <span class="labelClass">就诊人员：</span>
              <span>{{userDetails.regular_name ? userDetails.regular_name : ""}}</span>
              <span v-if="userDetails.is_main == 1" class="identityClass"
                >本人</span
              >
            </div>
            <div>
              <span class="labelClass">身份证号：</span>
              <span>{{userDetails.regular_certid ? userDetails.regular_certid : ""}}</span>
            </div>
            <div>
              <span class="labelClass">手机号：</span>
              <span>{{userDetails.regular_phone ? userDetails.regular_phone : "" }}</span>
            </div>
          </div>
        </div>
        <div class="caseBox">
          <div class="caseTit">既往病史（必填）</div>
          <div class="caseData">
            <div class="diseaseTit">
              疾病史
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list1"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list1')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="caseData">
            <div class="diseaseTit">
              传染病史
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list2"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list2')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="caseData">
            <div class="diseaseTit">
              手术史
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list3"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list3')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="otherBox">
            <span>其他补充</span>
            <span>
              <!-- <textarea
                v-if="!inputDisabled1 && !allInputDis"
                @blur="inputDisabled1=true"
                :disable-default-padding="true"
                type="text"
                fixed="true"
                :focus="true"
                placeholder="请输入其他补充"
                v-model="otherDesc.anamnesis_other"
                maxlength="50"
                :class="['ipt2','fixPosition']"
              /> -->
              <div  :class="['ipt2', {'colorGray': otherDesc.anamnesis_other.length===0}, {'colorBlack': otherDesc.anamnesis_other.length>0}]" style="width:100%;" @click="setInputDis(1)" >
                {{otherDesc.anamnesis_other.length===0?'请输入其他补充':otherDesc.anamnesis_other}}
              </div>
            </span>
          </div>
        </div>
        <div class="caseBox">
          <div class="caseTit">过敏史（必填）</div>
          <div class="caseData">
            <div class="diseaseTit">
              药物过敏
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list4"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list4')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="caseData">
            <div class="diseaseTit">
              食物及其他过敏
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list5"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list5')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="otherBox">
            <span>其他补充</span>
            <span>
              <!-- <textarea
                v-if="!inputDisabled2 && !allInputDis"
                @blur="inputDisabled2=true"
                :disable-default-padding="true"
                type="text"
                fixed="true"
                :focus="true"
                placeholder="请输入其他补充"
                maxlength="50"
                :class="['ipt2','fixPosition']"
                v-model="otherDesc.allergy_other"
              /> -->
              <div :class="['ipt2', {'colorGray': otherDesc.allergy_other.length===0}, {'colorBlack': otherDesc.allergy_other.length>0}]" style="width:100%;" @click="setInputDis(2)">
                {{otherDesc.allergy_other.length===0?'请输入其他补充':otherDesc.allergy_other}}
              </div>
            </span>
          </div>
        </div>
        <div class="caseBox" v-if="userDetails.regular_type==='1'">
          <div class="caseTit">婚育史</div>
          <div class="caseData">
            <div class="diseaseTit">
              婚姻状况
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list6"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list6')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="caseData">
            <div class="diseaseTit">
              生育妊娠状态（女性填写）
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list7"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list7')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <!--        <div class="otherBox">-->
          <!--          <span>其他补充</span>-->
          <!--          <span>-->
          <!--            <textarea type="text" placeholder="请输入其他补充" maxlength="50"  class="ipt2" v-model="step.obsterical_history.qt" />-->
          <!--          </span>-->
          <!--        </div>-->
        </div>
        <div class="caseBox">
          <div class="caseTit">家族史（必填）</div>
          <div class="caseData">
            <div class="diseaseTit">
              <!-- 婚姻状况 -->
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list8"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list8')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <!-- <div class="caseData">
            <div class="diseaseTit">
              生育状态（女性填写）
            </div>
            <ul class="diseaseBox">
              <li v-for="(item, index) in list7" :key="index">{{item.name}}</li>
            </ul>
          </div> -->
          <div class="otherBox">
            <span>其他补充</span>
            <span>
              <!-- <textarea
                v-if="!inputDisabled3 && !allInputDis"
                @blur="inputDisabled3=true"
                :disable-default-padding="true"
                type="text"
                fixed="true"
                :focus="true"
                placeholder="请输入其他补充"
                maxlength="50"
                :class="['ipt2','fixPosition']"
                v-model="otherDesc.family_other"
              /> -->
              <div :class="['ipt2', {'colorGray': otherDesc.family_other.length===0}, {'colorBlack': otherDesc.family_other.length>0}]" style="width:100%;" @click="setInputDis(3)" >
                {{otherDesc.family_other.length===0?'请输入其他补充':otherDesc.family_other}}
              </div>
            </span>
          </div>
        </div>
        <div class="caseBox">
          <div class="caseTit">个人习惯</div>
          <div class="caseData">
            <div class="diseaseTit">
              <!-- 婚姻状况 -->
            </div>
            <ul class="diseaseBox">
              <li
                v-for="(item, index) in arraySum.list9"
                :class="item.class"
                :key="index"
                @click="activeClick(index, 'list9')"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <!-- <div class="caseData">
            <div class="diseaseTit">
              生育状态（女性填写）
            </div>
            <ul class="diseaseBox">
              <li v-for="(item, index) in list7" :key="index">{{item.name}}</li>
            </ul>
          </div> -->
          <div class="otherBox">
            <span>其他补充</span>
            <span>
              <!-- <textarea
                v-if="!inputDisabled4 && !allInputDis"
                :disable-default-padding="true"
                type="text"
                fixed="true"
                placeholder="请输入其他补充"
                maxlength="50"
                :class="['ipt2','fixPosition']"
                :focus="true"
                @blur="inputDisabled4=true"
                :adjust-position='true'
                v-model="otherDesc.personal_other"
              /> -->
              <div  :class="['ipt2', {'colorGray': otherDesc.personal_other.length===0}, {'colorBlack': otherDesc.personal_other.length>0}]" style="width:100%;" @click="setInputDis(4)">
                {{otherDesc.personal_other.length===0?'请输入其他补充':otherDesc.personal_other}}
              </div>
            </span>
          </div>
        </div>
        <div
          :class="{'btnBox':true}"
          :style="{ 'pointer-events':true }"
          @click="saveRegularCase"
        >
          提交
        </div>
        <div v-if="ifIphonex" style="height:30rpx"></div>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
let app = getApp();
let store = app.store;
import api from "@/api/api";
import { mapState } from 'vuex'
import storage from "@/utils/storage";
const { $Toast, $Message } = require('../../../../../static/iview/base/index')
import navBar from '@/components/navBar'
export default {
  components: {
    navBar
  },
  data() {
    return {
      inputDisabled1: true,
      otherMsgModal: false,
      navTitle: '就诊人健康信息',
      allInputDis: true,
      upLoadLodin: false,
      otherMsg: '',
      otherIndex: 1,
      ipt: "ipt",
      modalStyle: "none",
      disabledShow: "auto",
      doctorInfo: {},
      host: "",
      date: "",
      time: "",
      interrogationKey: "",
      // describe: '',
      pic_array: [
        { id: 13, name: "1室1厅1卫" },
        { id: 14, name: "1室2厅1卫" },
        { id: 15, name: "2室1厅1卫" },
        { id: 16, name: "3室1厅2卫" },
        { id: 17, name: "4室1厅2卫" },
        { id: 18, name: "5室1厅3卫" },
        { id: 19, name: "6室1厅3卫" },
        { id: 20, name: "7室以上" },
      ],
      userId: "",
      hx_index: 0,
      files: [],
      upImg: [],
      diseaseList: [
        { name: "无" },
        { name: "无" },
        { name: "无" },
        { name: "无" },
        { name: "无" },
        { name: "无" },
      ],
      userList: [],
      userDetails: {
        regular_name: "",
        regular_certid: "",
        regular_phone: "",
        regular_id: "",
        regular_type: ""
      },
      arraySum: {
        // 疾病史
        list1: [
          { name: "无", key: "0", class: "" },
          { name: "哮喘", key: "1", class: "" },
          { name: "高血脂症", key: "2", class: "" },
          { name: "高血压", key: "3", class: "" },
          { name: "高尿酸血症", key: "4", class: "" },
          { name: "癫痫", key: "5", class: "" },
          { name: "心脏病", key: "6", class: "" },
          { name: "糖尿病", key: "7", class: "" },
          { name: "脑卒中", key: "8", class: "" },
          { name: "胃炎", key: "9", class: "" },
          { name: "肝炎", key: "10", class: "" },
        ],
        // 传染病史
        list2: [
          { name: "无", key: "0", class: "" },
          { name: "肺结核", key: "1", class: "" },
          { name: "病毒性肝炎", key: "2", class: "" },
          { name: "血吸虫病", key: "3", class: "" },
          { name: "淋病", key: "4", class: "" },
        ],
        // 手术史
        list3: [
          { name: "无", key: "0", class: "" },
          { name: "颅部手术", key: "1", class: "" },
          { name: "颈部手术", key: "2", class: "" },
          { name: "胸部手术", key: "3", class: "" },
          { name: "腹部手术", key: "4", class: "" },
          { name: "四肢手术", key: "5", class: "" },
          { name: "骨折", key: "6", class: "" },
          { name: "烧伤", key: "7", class: "" },
          { name: "烫伤", key: "8", class: "" },
          { name: "头部外伤", key: "9", class: "" },
          { name: "肌腱外伤", key: "10", class: "" },
        ],
        // 药物过敏
        list4: [
          { name: "无", key: "0", class: "" },
          { name: "青霉素", key: "1", class: "" },
          { name: "头孢类抗生素", key: "2", class: "" },
          { name: "破伤风抗生素", key: "3", class: "" },
          { name: "普鲁卡因", key: "4", class: "" },
          { name: "地卡因", key: "5", class: "" },
          { name: "磺胺类药物", key: "6", class: "" },
          { name: "维生素B1", key: "7", class: "" },
          { name: "泛影葡胺", key: "8", class: "" },
          { name: "阿司匹林", key: "9", class: "" },
        ],
        // 食物过敏
        list5: [
          { name: "无", key: "0", class: "" },
          { name: "芒果", key: "1", class: "" },
          { name: "牛奶", key: "2", class: "" },
          { name: "海鲜", key: "3", class: "" },
          { name: "笋", key: "4", class: "" },
          { name: "香菇", key: "5", class: "" },
          { name: "黄瓜", key: "6", class: "" },
          { name: "油漆", key: "7", class: "" },
          { name: "花粉", key: "8", class: "" },
          { name: "皮毛", key: "9", class: "" },
        ],
        // 婚姻史
        list6: [
          { name: "已婚", key: "1", class: "" },
          { name: "未婚", key: "2", class: "" },
        ],
        // 生育状态
        list7: [
          { name: "未生育", key: "1", class: "" },
          { name: "已生育", key: "2", class: "" },
          { name: "未怀孕", key: "3", class: "" },
          { name: "已怀孕", key: "4", class: "" },
        ],
        // 家族史
        list8: [
          { name: "无", key: "0", class: "" },
          { name: "高血压", key: "1", class: "" },
          { name: "糖尿病", key: "2", class: "" },
          { name: "心脏病", key: "3", class: "" },
          { name: "脑梗", key: "4", class: "" },
          { name: "脑出血", key: "5", class: "" },
          { name: "癌症", key: "6", class: "" },
          { name: "过敏性疾病", key: "7", class: "" },
          { name: "哮喘", key: "8", class: "" },
          { name: "癫痫病", key: "9", class: "" },
          { name: "白癜风", key: "10", class: "" },
        ],
        // 个人习惯
        list9: [
          { name: "无", key: "0", class: "" },
          { name: "吸烟", key: "1", class: "" },
          { name: "饮酒", key: "2", class: "" },
          { name: "熬夜", key: "3", class: "" },
          { name: "低头", key: "4", class: "" },
          { name: "久坐", key: "5", class: "" },
          { name: "久站", key: "6", class: "" },
          { name: "跷二郎腿", key: "7", class: "" },
          { name: "强忍大小便", key: "8", class: "" },
          { name: "饭后卧床", key: "9", class: "" },
          { name: "如厕看书报", key: "10", class: "" },
          { name: "不喜喝水", key: "11", class: "" },
        ],
      },
      step: {
        allergy_history: {
          qt: "",
          swgm: "",
          ywgm: "",
        },
        anamnesis: {
          crb: "",
          jb: "",
          qt: "",
          sss: "",
        },
        family_history: {
          jzs_jsz: "",
          qt: "",
        },
        obsterical_history: {
          hyzk: "",
          syzt: "",
        },
        personal_habits: {
          grxg_grxg: "",
          qt: "",
        }
      },
      otherDesc:{
        anamnesis_other:'',
        family_other:'',
        personal_other: '',
        allergy_other:''
      },
      imgUrl: "",
      rightIcon: "",
      addImage: "",
      closeImg: "",
      orderData: null,
      paymentNone: false,
      saveIndex: 0,
      regularcase: {},
      canDo:false
    };
  },
  onLoad(options) {
    this.navTitle = '就诊人健康信息'
    this.otherMsg = ''
    this.otherMsgModal = false
    this.userDetails = this.$route.query
    console.log(this.userDetails, '路由传来的参数')
    let that = this;
    that.orderData = null;
    that.paymentNone = false;
    that.disabledShow = "auto";
    that.upLoadLodin = false;
    that.modalShow = false;
    that.imgUrl = api.imgUrl;
    that.rightIcon = that.imgUrl + "rightIcon.png";
    that.addImage = that.imgUrl + "addImage.png";
    that.closeImg = that.imgUrl + "close.png";
    that.files = [];
    that.upImg = [];
    that.modalStyle = "none";
    that.arraySum = {
      // 疾病史
      list1: [
        { name: "无", key: "0", class: "" },
        { name: "哮喘", key: "1", class: "" },
        { name: "高血脂症", key: "2", class: "" },
        { name: "高血压", key: "3", class: "" },
        { name: "高尿酸血症", key: "4", class: "" },
        { name: "癫痫", key: "5", class: "" },
        { name: "心脏病", key: "6", class: "" },
        { name: "糖尿病", key: "7", class: "" },
        { name: "脑卒中", key: "8", class: "" },
        { name: "胃炎", key: "9", class: "" },
        { name: "肝炎", key: "10", class: "" },
      ],
      // 传染病史
      list2: [
        { name: "无", key: "0", class: "" },
        { name: "肺结核", key: "1", class: "" },
        { name: "病毒性肝炎", key: "2", class: "" },
        { name: "血吸虫病", key: "3", class: "" },
        { name: "淋病", key: "4", class: "" },
      ],
      // 手术史
      list3: [
        { name: "无", key: "0", class: "" },
        { name: "颅部手术", key: "1", class: "" },
        { name: "颈部手术", key: "2", class: "" },
        { name: "胸部手术", key: "3", class: "" },
        { name: "腹部手术", key: "4", class: "" },
        { name: "四肢手术", key: "5", class: "" },
        { name: "骨折", key: "6", class: "" },
        { name: "烧伤", key: "7", class: "" },
        { name: "烫伤", key: "8", class: "" },
        { name: "头部外伤", key: "9", class: "" },
        { name: "肌腱外伤", key: "10", class: "" },
      ],
      // 药物过敏
      list4: [
        { name: "无", key: "0", class: "" },
        { name: "青霉素", key: "1", class: "" },
        { name: "头孢类抗生素", key: "2", class: "" },
        { name: "破伤风抗生素", key: "3", class: "" },
        { name: "普鲁卡因", key: "4", class: "" },
        { name: "地卡因", key: "5", class: "" },
        { name: "磺胺类药物", key: "6", class: "" },
        { name: "维生素B1", key: "7", class: "" },
        { name: "泛影葡胺", key: "8", class: "" },
        { name: "阿司匹林", key: "9", class: "" },
      ],
      // 食物过敏
      list5: [
        { name: "无", key: "0", class: "" },
        { name: "芒果", key: "1", class: "" },
        { name: "牛奶", key: "2", class: "" },
        { name: "海鲜", key: "3", class: "" },
        { name: "笋", key: "4", class: "" },
        { name: "香菇", key: "5", class: "" },
        { name: "黄瓜", key: "6", class: "" },
        { name: "油漆", key: "7", class: "" },
        { name: "花粉", key: "8", class: "" },
        { name: "皮毛", key: "9", class: "" },
      ],
      // 婚姻史
      list6: [
        { name: "已婚", key: "1", class: "" },
        { name: "未婚", key: "2", class: "" },
      ],
      // 生育状态
      list7: [
        { name: "未生育", key: "1", class: "" },
        { name: "已生育", key: "2", class: "" },
        { name: "未怀孕", key: "3", class: "" },
        { name: "已怀孕", key: "4", class: "" },
      ],
      // 家族史
      list8: [
        { name: "无", key: "0", class: "" },
        { name: "高血压", key: "1", class: "" },
        { name: "糖尿病", key: "2", class: "" },
        { name: "心脏病", key: "3", class: "" },
        { name: "脑梗", key: "4", class: "" },
        { name: "脑出血", key: "5", class: "" },
        { name: "癌症", key: "6", class: "" },
        { name: "过敏性疾病", key: "7", class: "" },
        { name: "哮喘", key: "8", class: "" },
        { name: "癫痫病", key: "9", class: "" },
        { name: "白癜风", key: "10", class: "" },
      ],
      // 个人习惯
      list9: [
        { name: "无", key: "0", class: "" },
        { name: "吸烟", key: "1", class: "" },
        { name: "饮酒", key: "2", class: "" },
        { name: "熬夜", key: "3", class: "" },
        { name: "低头", key: "4", class: "" },
        { name: "久坐", key: "5", class: "" },
        { name: "久站", key: "6", class: "" },
        { name: "跷二郎腿", key: "7", class: "" },
        { name: "强忍大小便", key: "8", class: "" },
        { name: "饭后卧床", key: "9", class: "" },
        { name: "如厕看书报", key: "10", class: "" },
        { name: "不喜喝水", key: "11", class: "" },
      ],
    };
    that.otherDesc = {
      anamnesis_other:'',
      family_other:'',
      personal_other: '',
      allergy_other:''
    }
    this.getRegularCase()
  },
  computed: {
    ...mapState(['ifIphonex'])
  },
  mounted() {
    console.log(this.ifIphonex)
  },
  methods: {
    closeModal() {
      this.modalShow = false;
      // this.hx_index = 0
    },
    activeClick(e, key) {
      console.log('触发')
      if (this.arraySum[key][e].class == "") {
        this.$set(this.arraySum[key][e], "class", "active");
      } else {
        this.$set(this.arraySum[key][e], "class", "");
      }
      if (key != "list6" && key != "list7") {
        if (e == 0) {
          this.arraySum[key].forEach((item, index) => {
            if (index != 0) {
              this.$set(this.arraySum[key][index], "class", "");
            }
          });
        } else {
          this.arraySum[key].forEach((item, index) => {
            if (index == 0) {
              this.$set(this.arraySum[key][index], "class", "");
            }
          });
        }
      } else {
        this.arraySum[key].forEach((item, index) => {
          if (index != e) {
            this.$set(this.arraySum[key][index], "class", "");
          }
        });
      }
      let list = this.arraySum[key];
      this.arraySum[key] = [];
      this.arraySum[key] = list;
      console.log(this.arraySum)
    },
    toSuccess() {
      let list1 = "";
      let list2 = "";
      let list3 = "";
      let list4 = "";
      let list5 = "";
      let list6 = "";
      let list7 = "";
      let list8 = "";
      let list9 = "";
      this.arraySum.list1.forEach((item, index) => {
        if (item.class == "active") {
          list1 += item.name + ",";
        }
      });
      this.step.anamnesis.jb = list1;
      this.step.anamnesis.jb = this.step.anamnesis.jb.substring(
        0,
        this.step.anamnesis.jb.length - 1
      );
      console.log(this.step.anamnesis.jb);
      this.arraySum.list2.forEach((item, index) => {
        if (item.class == "active") {
          list2 += item.name + ",";
        }
      });
      this.step.anamnesis.crb = list2;
      this.step.anamnesis.crb = this.step.anamnesis.crb.substring(
        0,
        this.step.anamnesis.crb.length - 1
      );
      this.arraySum.list3.forEach((item, index) => {
        if (item.class == "active") {
          list3 += item.name + ",";
        }
      });
      this.step.anamnesis.sss = list3;
      this.step.anamnesis.sss = this.step.anamnesis.sss.substring(
        0,
        this.step.anamnesis.sss.length - 1
      );
      this.arraySum.list4.forEach((item, index) => {
        if (item.class == "active") {
          list4 += item.name + ",";
        }
      });
      this.step.allergy_history.ywgm = list4;
      this.step.allergy_history.ywgm = this.step.allergy_history.ywgm.substring(
        0,
        this.step.allergy_history.ywgm.length - 1
      );
      this.arraySum.list5.forEach((item, index) => {
        if (item.class == "active") {
          list5 += item.name + ",";
        }
      });
      this.step.allergy_history.swgm = list5;
      this.step.allergy_history.swgm = this.step.allergy_history.swgm.substring(
        0,
        this.step.allergy_history.swgm.length - 1
      );
      this.step.obsterical_history.hyzk = '';
      this.arraySum.list6.forEach((item, index) => {
        if (item.class == "active") {
          this.step.obsterical_history.hyzk = item.name;
        }
      });
      this.step.obsterical_history.syzt = '';
      this.arraySum.list7.forEach((item, index) => {
        if (item.class == "active") {
          this.step.obsterical_history.syzt = item.name;
        }
      });
      this.arraySum.list8.forEach((item, index) => {
        if (item.class == "active") {
          list8 += item.name + ",";
        }
      });
      this.step.family_history.jzs_jsz = list8;
      this.step.family_history.jzs_jsz = this.step.family_history.jzs_jsz.substring(
        0,
        this.step.family_history.jzs_jsz.length - 1
      );
      this.arraySum.list9.forEach((item, index) => {
        if (item.class == "active") {
          list9 += item.name + ",";
        }
      });
      this.step.personal_habits.grxg_grxg = list9;
      this.step.personal_habits.grxg_grxg = this.step.personal_habits.grxg_grxg.substring(
        0,
        this.step.personal_habits.grxg_grxg.length - 1
      );
    },
    getDateTime() {
      var now = new Date();
      var nowTime = now.toLocaleString();
      // var date = nowTime.substring(0,10);//截取日期
      let date = now;
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      date = y + "-" + MM + "-" + d;
      var time = nowTime.substring(10, 21); //截取时间
      var week = now.getDay(); //星期
      var hour = now.getHours(); //小时
      //判断星期几
      var weeks = ["日", "一", "二", "三", "四", "五", "六"];
      // var getWeek = "星期" + weeks[week];
      var sc;
      //判断是AM or PM
      if (hour >= 0 && hour < 5) {
        sc = "凌晨";
      } else if (hour > 5 && hour <= 7) {
        sc = "早上";
      } else if (hour > 7 && hour <= 11) {
        sc = "上午";
      } else if (hour > 11 && hour <= 13) {
        sc = "中午";
      } else if (hour > 13 && hour <= 18) {
        sc = "下午";
      } else if (hour > 18 && hour <= 23) {
        sc = "晚上";
      }
      // document.getElementById('time').innerHTML ="当前时间：" + date+" " + getWeek +" "+"   "+sc+"  "+time;
      // console.log('日期', date)
      let newTime = this.$utils.filterTime(new Date().getTime() / 1000, 6);
      console.log(newTime, "newTime");
      this.date = date;
      this.time = newTime;
      // setTimeout('showTime()',1000);
    },
    // 获取病例信息
    getRegularCase () {
      this.$api.userRegularCaseQuery({regular_id:this.userDetails.regular_id}, { showLoading:  true }).then(res => {
        mpvue.showLoading({
          title: "加载中",
          mask: true,
        });
        // 回显已经选择的数据
        for (let key in res.data) {
          if (key === 'anamnesis') {
            for(let k1 in res.data[key]) {
              switch (k1) {
                case 'jb':
                  this.checkActive(this.arraySum.list1,res.data[key][k1])
                  break
                case 'crb':
                  this.checkActive(this.arraySum.list2,res.data[key][k1])
                  break
                case 'sss':
                  this.checkActive(this.arraySum.list3,res.data[key][k1])
                  break
                case 'qt':
                  // this.step.anamnesis.qt = res.data[key][k1]
                  this.otherDesc.anamnesis_other = res.data[key][k1]
                  console.log(res.data[key][k1])
                  break
              }
            }
          } else if (key === 'allergy_history') {
            for(let k2 in res.data[key]) {
              switch (k2) {
                case 'swgm':
                  this.checkActive(this.arraySum.list5,res.data[key][k2])
                  break
                case 'ywgm':
                  this.checkActive(this.arraySum.list4,res.data[key][k2])
                  break
                case 'qt':
                  this.otherDesc.allergy_other = res.data[key][k2]
                break
              }
            }
          } else if (key === 'obsterical_history') {
            for(let k3 in res.data[key]) {
              switch (k3) {
                case 'hyzk':
                  this.checkActive(this.arraySum.list6,res.data[key][k3])
                  break
                case 'syzt':
                  this.checkActive(this.arraySum.list7,res.data[key][k3])
                  break
              }
            }
          } else if (key === 'family_history') {
            this.checkActive(this.arraySum.list8,res.data[key].jzs_jsz)
            this.otherDesc.family_other = res.data[key].qt
          } else if (key === 'personal_habits') {
            this.checkActive(this.arraySum.list9,res.data[key].grxg_grxg)
            this.otherDesc.personal_other = res.data[key].qt
          }
        }
        // 触发重绘
        setTimeout(() => {
          let list = []
          for (let key in this.arraySum) {
            list = []
            list = list.concat(this.arraySum[key])
            this.arraySum[key] = list
          }
          mpvue.hideLoading()
        }, 500);
        this.regularCase = res.data
      })
    },
    // 更新数组视图
    checkActive(targetList, data) {
      targetList.forEach((ele,i)=>{
      if (data.indexOf(ele.name)!==-1) {
        this.$set(targetList[i], "class", "active");
      }
    })
    },
    // 保存病例信息
    saveRegularCase () {
      this.step.anamnesis.qt = this.otherDesc.anamnesis_other
      this.step.allergy_history.qt = this.otherDesc.allergy_other
      this.step.family_history.qt = this.otherDesc.family_other
      this.step.personal_habits.qt = this.otherDesc.personal_other
      this.toSuccess()
      if (
        (!this.step.anamnesis.jb ||
          !this.step.anamnesis.crb ||
          !this.step.anamnesis.sss) &&
        !this.step.anamnesis.qt
      ) {
        this.$utils.showToast("text", "请填写完整既往病史后再预约");
        this.disabledShow = "auto";
        return;
      }
      if (
        (!this.step.allergy_history.ywgm || !this.step.allergy_history.swgm) &&
        !this.step.allergy_history.qt
      ) {
        this.$utils.showToast("text", "请填写完整过敏史后再预约");
        this.disabledShow = "auto";
        return;
      }
      if (!this.step.family_history.jzs_jsz && !this.step.family_history.qt) {
        this.$utils.showToast("text", "请填写家族史后再预约");
        this.disabledShow = "auto";
        return;
      }
      this.step.regular_id = this.userDetails.regular_id
      console.log(this.step)
      this.$api.userRegularCaseModify(this.step, { showLoading:  true }).then(res => {
        console.log(res.data)
        if (res.code === 0) {
          $Toast({
            content: "提交成功",
            type: "success"
          })
          this.$router.go(-1)
        } else {
          $Toast({
            content: "保存失败,请稍后再试",
            type: "info"
          })
        }
      })
    },
    // 滑动
    touchstart () {
      this.allInputDis = true
    },
    // 显示输入弹层
    setInputDis(num) {
      this.otherIndex = num
      switch (this.otherIndex) {
        case 1:
           this.otherMsg = this.otherDesc.anamnesis_other
        break
        case 2:
          this.otherMsg = this.otherDesc.allergy_other
        break
        case 3:
          this.otherMsg = this.otherDesc.family_other
        break
        case 4:
          this.otherMsg = this.otherDesc.personal_other
        break
      }
      this.otherMsgModal = true
      this.navTitle = '其他补充'
    },
    // 关闭其他输入弹框
    affirmInput () {
      switch (this.otherIndex) {
        case 1:
          this.otherDesc.anamnesis_other = this.otherMsg
        break
        case 2:
          this.otherDesc.allergy_other = this.otherMsg
        break
        case 3:
          this.otherDesc.family_other = this.otherMsg
        break
        case 4:
          this.otherDesc.personal_other = this.otherMsg
        break
      }
      this.navTitle = '就诊人健康信息'
      this.otherMsgModal = false
      this.otherMsg = ''
    },
    goBack () {
      if (this.otherMsgModal) {
        this.otherMsgModal = false
        this.navTitle = '就诊人健康信息'
      } else {
        this.$router.go(-1)
      }
    }
  },
  onUnload() {
    let that = this;
    that.step.regular_id = null;
    that.userId = null;
    that.modalStyle = "none";
  },
  onShow(options) {
    this.getDateTime();
  },
  watch: {
    sessionsList: function (oldValue, newValue) {
      // this.dealData()
    },
  },
};
</script>

<style scoped lang="less">
.slash {
  color: #cccccc;
}
.redClolr {
  color: #ff5453;
  font-size: 20rpx;
}
.subPage {
  display: flex;
  flex-direction: column;
}
.navBox {
  padding: 10rpx 60rpx;
  width: 630rpx;
  height: 92rpx;
  background: rgba(74, 100, 234, 1);
  .navTop {
    margin-left: 52rpx;
    span {
      display: inline-block;
    }
    .circular {
      width: 19rpx;
      height: 19rpx;
      border-radius: 50rpx;
      background: #ffffff;
      border: 1rpx solid #ffffff;
    }
    .lineClass {
      width: 150rpx;
      border-top: 1rpx solid #ffffff;
      height: 13rpx;
      line-height: 19rpx;
    }
    .opacityClass {
      opacity: 0.2;
    }
  }
  .navTop > span:nth-child(5) {
    background: none;
  }
  .navTop > span:nth-child(7) {
    background: none;
  }
  .navBom {
    span {
      display: inline-block;
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      margin-right: 50rpx;
    }
  }
  .navBom > span:nth-child(4) {
    margin-right: 0rpx;
  }
}
.faCenter {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
.centBox {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f9f9f9;
  .userMsg {
    // width:690rpx;
    height: 160rpx;
    // background:rgba(245,245,245,1);
    padding: 34rpx 50rpx 37rpx 50rpx;
    background: #ffffff;
    margin-bottom: 16rpx;
    .divTop {
      height: 50rpx;
      background: rgba(235, 245, 255, 1);
      font-size: 30rpx;
      font-weight: 600;
      color: rgba(37, 143, 248, 1);
      line-height: 50rpx;
      margin-bottom: 20rpx;
      width: 140rpx;
      text-align: center;
    }
    span {
      display: inline-block;
    }
    .divCenter {
      margin-bottom: 7rpx;
    }
    .divCenter > span:nth-child(1) {
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(74, 113, 232, 1);
      margin-right: 20rpx;
    }
    .divCenter > span:nth-child(2) {
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .divBom {
      display: flex;
      justify-content: space-between;
      span {
        line-height: 52rpx;
      }
      div {
        display: block;
      }
    }
    .divBom > span:nth-child(1) {
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .divBom > span:nth-child(2) {
      font-size: 40rpx;
      font-weight: 600;
      color: rgba(255, 84, 83, 1);
    }
  }
  .detailsBox > div {
    border-bottom: 1rpx solid #e9e9e9;
  }
  .detailsBox {
    background: #ffffff;
    .choiceBox {
      height: 90rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 90rpx;
      padding-left: 40rpx;
      position: relative;
      .iconBox {
        // position: relative;
        span {
          position: absolute;
          right: 85rpx;
          top: 3rpx;
          color: #258ff8;
          font-size: 30rpx;
          font-weight: 300;
        }
        img {
          width: 17rpx;
          height: 30rpx;
          position: absolute;
          right: 30rpx;
          top: 34rpx;
        }
      }
    }
  }
  .msgBox {
    height: 150rpx;
    padding: 30rpx 40rpx 30rpx 40rpx;
    div {
      margin-bottom: 10rpx;
    }
    span {
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .identityClass {
      display: inline-block;
      width: 68rpx;
      height: 41rpx;
      background: rgba(16, 193, 91, 1);
      font-size: 24rpx;
      font-weight: 400;
      // color:rgba(255,255,255,1);
      line-height: 41rpx;
      text-align: center;
      margin-left: 20rpx;
      color: #ffffff;
    }
    .labelClass {
      display: inline-block;
      font-size: 30rpx;
      font-weight: 300;
      color: #666666;
      width: 150rpx;
    }
  }
  .msgBox > div:nth-child(3) {
    margin-bottom: 0rpx;
  }
  .describeBox {
    position: relative;
    border-bottom: 0rpx solid #e9e9e9 !important;
    textarea {
      min-height: 150rpx;
      height: auto;
    }
    .iptBox {
      display: block;
      // overflow: auto;
    }
    .ipt {
      padding: 30rpx;
      // height: 215rpx !important;
      width: 670rpx !important;
      display: block;
      color: #999999;
      line-height: 32rpx;
      font-size: 30rpx;
      margin: auto;
    }
    .phClass {
      color: #999999;
    }
    .ipt3 {
      padding: 30rpx;
      height: 215rpx !important;
      width: 670rpx !important;
      display: block;
      color: #999999;
      line-height: 32rpx;
      font-size: 30rpx;
    }
    .record {
      // position: absolute;
      font-size: 30rpx;
      font-weight: 300;
      color: rgba(204, 204, 204, 1);
      text-align: right;
      padding-right: 60rpx;
      // bottom:50%;
      // right: 40rpx;
    }
  }
  .caseBox {
    background: #ffffff;
    .caseTit {
      padding-left: 30rpx;
      height: 89rpx;
      background: #ebf5ff;
      font-size: 36rpx;
      font-weight: 700;
      color: #4B7AEA;
      line-height: 89rpx;
    }
    .diseaseTit {
      padding: 20rpx 30rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .diseaseBox {
      // display: flex;
      // justify-content:space-around;
      border-bottom: 1rpx solid #E9E9E9;
      padding-left: 30rpx;
      li {
        width: 210rpx;
        height: 70rpx;
        background: rgba(245, 245, 245, 1);
        border: 1rpx solid rgba(245, 245, 245, 1);
        border-radius: 4rpx;
        display: inline-block;
        margin-right: 25rpx;
        margin-bottom: 30rpx;
        text-align: center;
        line-height: 70rpx;
        font-size: 30rpx;
        font-weight: 300;
        color: rgba(51, 51, 51, 1);
      }
      .active {
        border: 1rpx solid #4a71e8;
        background: rgba(235, 245, 255, 1);
        color: #4a71e8;
      }
    }
    .otherBox {
      min-height: 88rpx;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      span {
        display: inline-block;
        font-size: 36rpx;

        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        // padding: 20rpx 0;
      }
    }
    .otherBox > span:nth-child(1) {
      margin-right: 30rpx;
      width: 150rpx;
    }
    .otherBox > span:nth-child(2) {
      // width: ;
      flex: 1;
      vertical-align: bottom;
    }
    .ipt2 {
      min-height: 50rpx;
      width: 100%;
      // background-color: red;
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      overflow: hidden;
    }
    .colorGray {
      color: gray;
    }
    .colorBlack {
      color: #333;
    }
    .fixPosition {
      // margin-top: -12rpx;
      height: 200rpx;
    }
  }
  .btnBox {
    margin: 30rpx;
    font-size: 36rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background: #4253e1;
    border-radius: 10rpx;
  }
  .ipxBtn {
    margin-bottom: 60rpx;
  }
}
.modalShowClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  .modalBox {
    width: 100%;
    // height:663rpx;
    z-index: 99;
    background: #ffffff;
    // border-radius:12px;
    // border-bottom-right-radius: 0;
    // border-bottom-left-radius: 0;
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 0rpx;
      // right: -30rpx;
      // top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalTit {
      height: 90rpx;
      line-height: 90rpx;
      width: 100%;
      text-align: center;
      font-size: 34rpx;
      // font-family:PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      border-bottom: 1rpx solid #e9e9e9;
    }
    .modalCenter {
      // padding: 67rpx 30rpx 33rpx 37rpx;
      display: flex;
      flex-direction: column;
      margin-bottom: 166rpx;
      .paymentBox {
        width: 686rpx;
        height: 50rpx;
        padding: 0 32rpx;
        padding-top: 22rpx;
        padding-bottom: 28rpx;
        border-top: 1rpx solid #e9e9e9;
        border-bottom: 1rpx solid #e9e9e9;
        display: flex;
        justify-content: space-between;
        .paymentLeft {
          width: 50rpx;
          height: 50rpx;
          border: 1rpx solid red;
        }
        .paymentCenter {
          height: 50rpx;
          line-height: 50rpx;
          width: 576rpx;
          margin-left: 21rpx;
          margin-right: 21rpx;
          text-align: left;
          .left {
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
          }
          .right {
            font-size: 28rpx;
            font-weight: 400;
            color: #999999;
          }
        }
        .paymentRight {
          width: 50rpx;
          height: 50rpx;
          border: 1rpx solid red;
        }
      }
    }
    .modalFooter {
      // width:544rpx;
      height: 92rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 92rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
.modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    width: 617rpx;
    // height:663rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    position: relative;
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: -30rpx;
      top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalCenter {
      padding: 67rpx 30rpx 33rpx 37rpx;
      display: flex;
      flex-direction: column;
      .picClass {
        height: 131rpx;
        line-height: 131rpx;
        text-align: center;
        border-top: 1rpx solid #e9e9e9;
        border-bottom: 1rpx solid #e9e9e9;
        div {
          font-size: 50rpx;
          font-weight: normal;
          color: rgba(34, 75, 198, 1);
        }
      }
      .dataBox {
        margin-bottom: 40rpx;
        span {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: middle;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          // vertical-align: middle;
          margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 95%;
        }
      }
    }
    .modalFooter {
      div {
        width: 309rpx;
        height: 90rpx;
        font-size: 36rpx;
        font-weight: 400;
        display: inline-block;
        text-align: center;
        line-height: 90rpx;
      }
      .btnLeft {
        background: rgba(247, 248, 250, 1);
        border-radius: 0rpx 0rpx 0rpx 24rpx;
        color: #333333;
      }
      .btnRight {
        background: rgba(74, 100, 234, 1);
        border-radius: 0rpx 0rpx 24rpx 0rpx;
        color: #ffffff;
      }
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 1;
    z-index: 100;
    .out {
      height: 412rpx;
      border-radius: 15rpx;
      width: 650rpx;
      background: #fff;
      z-index: 999;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -206rpx;
      margin-left: -325rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top {
        flex: 1;
        padding: 110rpx 48rpx 0 48rpx;
        text-align: center;
        span {
          font-size: 34rpx;
          font-family:PingFangSC-Regular,PingFangSC;
          font-weight:400;
          line-height:48rpx;
        }
      }
      .btm {
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        .sure {
          background:#4A64EA;
          color: #fff;
        }
        span {
          flex: 1;
          text-align: center;
        }
        span:nth-child(1) {
          background: #f9f9f9;
        }
        span:nth-child(2) {
          background:#4A64EA;
          color: #fff;
        }
      }
    }
  }
.fillOtherMsg {
  // position: absolute;
  flex: 1;
  height: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 9999;
  box-sizing: border-box;
  padding: 0 30rpx;
  padding-top: 40rpx;
  display: flex;
  flex-direction: column;
  .textCont {
    flex: 1;
    display: flex;
    flex-direction: column;
    .newIpt {
      height: 250rpx;
      width: 100%;
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      overflow: hidden;
    }
    .newIpt::-webkit-input-placeholder { /* WebKit browsers */
      color: #999;
      font-size: 32rpx;
    }
    .fontNumCount {
      color: #CCCCCC;
      font-size: 30rpx;
      flex: 1;
      text-align: right;
    }
  }
  .submitBtn {
    margin-bottom: 35rpx;
    width: 100%;
    height: 90rpx;
    background-color:rgb(0, 136, 255);
    font-size: 34rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
  }
}
</style>
